<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Power Down | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Power Down" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Perform a power down on all or part of an account’s VESTS using either Steemconnect or client-side signing." />
<meta property="og:description" content="Perform a power down on all or part of an account’s VESTS using either Steemconnect or client-side signing." />
<link rel="canonical" href="power_down.html" />
<meta property="og:url" content="power_down.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"Perform a power down on all or part of an account’s VESTS using either Steemconnect or client-side signing.","mainEntityOfPage":{"@type":"WebPage","@id":"power_down.html"},"@type":"BlogPosting","url":"power_down.html","headline":"JS: Power Down","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-power-down" class="row tutorials-javascript-power-down">
	<h3>
		<a id="tutorials-javascript-power-down">
			JS: Power Down
			
		</a>
	</h3>
	
		<span class="description"><p><em>Perform a power down on all or part of an account’s VESTS using either Steemconnect or client-side signing.</em></p>
</span>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/25_power_down">Power Down</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a>.</span>
<br /></p>

<p>This tutorial runs on the main Steem blockchain. Therefore, any accounts used here will affect real funds on the live network. <strong>Use with caution.</strong></p>

<h2 id="intro">Intro</h2>

<p>This tutorial will demonstrate a few functions such as querying account by name and determining the vesting balance of the related account. We are using the <code class="highlighter-rouge">call</code> function provided by the <code class="highlighter-rouge">dsteem</code> library to pull account data from the Steem blockchain. We then calculate STEEM Power from the VESTS (vesting shares) for the convenience of the user. We will use a simple HTML interface to capture the account and its VESTS. It also has an interactive UI to perform a power down in full or in part.</p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#app-setup"><strong>App setup</strong></a> Setup <code class="highlighter-rouge">dsteem</code> to use the proper connection and network.</li>
  <li><a href="#search-account"><strong>Search account</strong></a> Get account details after input has account name</li>
  <li><a href="#fill-form"><strong>Calculate and Fill form</strong></a> Calculate available vesting shares and fill the form with details</li>
  <li><a href="#power-down"><strong>Power down</strong></a> Power down VESTS with Steemconnect or client-side signing.</li>
</ol>

<h4 id="1-app-setup-">1. App setup <a name="app-setup"></a></h4>

<p>Below, we have <code class="highlighter-rouge">dsteem</code> pointing to the production network with the proper chainId, addressPrefix, and endpoint. There is a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of this tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">dsteem</span><span class="dl">'</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{};</span>
<span class="c1">//connect to production server</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">addressPrefix</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">STM</span><span class="dl">'</span><span class="p">;</span>
<span class="nx">opts</span><span class="p">.</span><span class="nx">chainId</span> <span class="o">=</span>
    <span class="dl">'</span><span class="s1">0000000000000000000000000000000000000000000000000000000000000000</span><span class="dl">'</span><span class="p">;</span>
<span class="c1">//connect to server which is connected to the network/production</span>
<span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://api.steemit.com</span><span class="dl">'</span><span class="p">);</span>
</code></pre></div></div>

<h4 id="2-search-account-">2. Search account <a name="search-account"></a></h4>

<p>After the account name field has been filled with a name, we automatically search for the account by name when the input is focused out. The related HTML input forms can be found in the <code class="highlighter-rouge">index.html</code> file. The values are pulled from that screen with the following:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    <span class="kd">const</span> <span class="nx">accSearch</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
    <span class="kd">const</span> <span class="nx">_account</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">call</span><span class="p">(</span><span class="dl">'</span><span class="s1">get_accounts</span><span class="dl">'</span><span class="p">,</span> <span class="p">[[</span><span class="nx">accSearch</span><span class="p">]]);</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">`_account:`</span><span class="p">,</span> <span class="nx">_account</span><span class="p">);</span>
</code></pre></div></div>

<h4 id="3-calculate-and-fill-form-">3. Calculate and Fill form <a name="fill-form"></a></h4>

<p>Once the account data has been fetched, we will fill the form with VESTS balance and show current balance details. Note, that in order to get the available vesting shares we will have to check a few things:</p>

<ul>
  <li>if account is already powering down</li>
  <li>how much is currently powering down</li>
  <li>how much has been delegated (because active delegation locks those funds from being powered down)</li>
</ul>

<p>Available balance will be in the <code class="highlighter-rouge">avail</code> variable.</p>

<p>For the convenience of the user, we will convert available VESTS to STEEM with <code class="highlighter-rouge">getDynamicGlobalProperties</code> function and fill the form fields accordingly.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    <span class="kd">const</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">_account</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span><span class="p">;</span>
    <span class="kd">const</span> <span class="nx">avail</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">_account</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">vesting_shares</span><span class="p">)</span> <span class="o">-</span> <span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">_account</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">to_withdraw</span><span class="p">)</span> <span class="o">-</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">_account</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">withdrawn</span><span class="p">))</span> <span class="o">/</span> <span class="mi">1</span><span class="nx">e6</span> <span class="o">-</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">_account</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">delegated_vesting_shares</span><span class="p">);</span>

    <span class="kd">const</span> <span class="nx">props</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">getDynamicGlobalProperties</span><span class="p">();</span>
    <span class="kd">const</span> <span class="nx">vestSteem</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">total_vesting_fund_steem</span><span class="p">)</span> <span class="o">*</span>
        <span class="p">(</span><span class="nb">parseFloat</span><span class="p">(</span><span class="nx">avail</span><span class="p">)</span> <span class="o">/</span> <span class="nb">parseFloat</span><span class="p">(</span><span class="nx">props</span><span class="p">.</span><span class="nx">total_vesting_shares</span><span class="p">)),</span><span class="mi">6</span><span class="p">);</span>

    <span class="kd">const</span> <span class="nx">balance</span> <span class="o">=</span> <span class="s2">`Available Vests for </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">: </span><span class="p">${</span><span class="nx">avail</span><span class="p">}</span><span class="s2"> VESTS ~ </span><span class="p">${</span><span class="nx">vestSteem</span><span class="p">}</span><span class="s2"> STEEM POWER&lt;br/&gt;&lt;br/&gt;`</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">accBalance</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">balance</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">steem</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">avail</span><span class="o">+</span><span class="dl">'</span><span class="s1"> VESTS</span><span class="dl">'</span><span class="p">;</span>
</code></pre></div></div>

<p>Once form is filled with the maximum available VESTS balance, we can choose the amount of VESTS to power down.</p>

<h4 id="4-power-down-">4. Power down <a name="power-down"></a></h4>

<p>We have two options on how to Power down: Steemconnect and client-side signing. By default we generate a Steemconnect link to Power down (withdraw vesting), but we can also choose the client signing option to Power down right inside tutorial. <strong>Note:</strong> client-side signing will require Active Private key to perform the operation.</p>

<p>In order to enable client signing, we will generate the operation and also show Active Private key (wif) field to sign transaction right there, client side.</p>

<p>Below, we can see an example of the operation and signing transaction. After a successful broadcast, the result will be shown in user interface. It will show the block number that the transaction was included in.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">submitTx</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">privateKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromString</span><span class="p">(</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">wif</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span>
    <span class="p">);</span>
    <span class="kd">const</span> <span class="nx">op</span> <span class="o">=</span> <span class="p">[</span>
        <span class="dl">'</span><span class="s1">withdraw_vesting</span><span class="dl">'</span><span class="p">,</span>
        <span class="p">{</span>
            <span class="na">account</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">,</span>
            <span class="na">vesting_shares</span><span class="p">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">steem</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">,</span>
        <span class="p">},</span>
    <span class="p">];</span>
    <span class="nx">client</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">sendOperations</span><span class="p">([</span><span class="nx">op</span><span class="p">],</span> <span class="nx">privateKey</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span>
        <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">result</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">block</span><span class="dl">'</span><span class="p">;</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span>
                <span class="dl">'</span><span class="s1">result</span><span class="dl">'</span>
            <span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s2">`&lt;br/&gt;&lt;p&gt;Included in block: </span><span class="p">${</span>
                <span class="nx">result</span><span class="p">.</span><span class="nx">block_num</span>
            <span class="p">}</span><span class="s2">&lt;/p&gt;&lt;br/&gt;&lt;br/&gt;`</span><span class="p">;</span>
        <span class="p">},</span>
        <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
        <span class="p">}</span>
    <span class="p">);</span>
<span class="p">};</span>
</code></pre></div></div>

<p>That’s it!</p>

<h3 id="to-run-this-tutorial">To run this tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/25_power_down</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

<hr />

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

